<template>
    <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="800px" :close-on-click-modal="false">
        <el-form :model="scheduleForm" label-width="120px">


            <!--      开启-->
            <div style="font-size: 20px;font-weight: 700;margin-left: 30px">开启</div>
            <el-form-item label="星期">
                <el-radio-group v-model="weekOpenDay" size="large" @change="weekOpenDayChange">
                    <el-radio-button :label="0">日</el-radio-button>
                    <el-radio-button :label="1">一</el-radio-button>
                    <el-radio-button :label="2">二</el-radio-button>
                    <el-radio-button :label="3">三</el-radio-button>
                    <el-radio-button :label="4">四</el-radio-button>
                    <el-radio-button :label="5">五</el-radio-button>
                    <el-radio-button :label="6">六</el-radio-button>
                </el-radio-group>

                <el-button style="margin-left: 20px"
                           type="success"
                           @click="addExecuteTime()"
                           icon="el-icon-plus"
                >
                </el-button>
            </el-form-item>
            <div>
                <el-form-item v-if="executeTime.length>0" v-for="(item, index) in executeTime" :key="index">
                    <div style="display: flex">
                        <el-time-picker
                            v-model="executeTime[index]"
                            format="HH:mm"
                            value-format="HH:mm"
                            placeholder="选择时间"
                        >
                        </el-time-picker>
                        <el-link style="margin-left: 5px" @click="delExecuteTime(index)" type="danger"
                                 :underline="false"
                        >删除
                        </el-link>
                    </div>
                </el-form-item>

                <div v-if="executeTime.length===0">
                    <el-form-item>
                        未设置时间
                    </el-form-item>
                </div>
            </div>

            <el-divider></el-divider>

            <!--      结束-->
            <div style="font-size: 20px;font-weight: 700;margin-left: 30px;margin-top: 30px">关闭</div>
            <el-form-item label="星期">
                <el-radio-group v-model="weekCloseDay" size="large" @change="weekCloseDayChange">
                    <el-radio-button :label="0">日</el-radio-button>
                    <el-radio-button :label="1">一</el-radio-button>
                    <el-radio-button :label="2">二</el-radio-button>
                    <el-radio-button :label="3">三</el-radio-button>
                    <el-radio-button :label="4">四</el-radio-button>
                    <el-radio-button :label="5">五</el-radio-button>
                    <el-radio-button :label="6">六</el-radio-button>
                </el-radio-group>

                <el-button style="margin-left: 20px"
                           type="success"
                           @click="addCloseTime()"
                           icon="el-icon-plus"
                >
                </el-button>
            </el-form-item>
            <div>
                <el-form-item v-if="closeTime.length>0" v-for="(item, index) in closeTime" :key="index">
                    <div style="display: flex">
                        <el-time-picker
                            v-model="closeTime[index]"
                            format="HH:mm"
                            value-format="HH:mm"
                            placeholder="选择时间"
                        >
                        </el-time-picker>
                        <el-link style="margin-left: 5px" @click="delCloseTime(index)" type="danger"
                                 :underline="false"
                        >删除
                        </el-link>
                    </div>
                </el-form-item>

                <div v-if="closeTime.length===0">
                    <el-form-item>
                        未设置时间
                    </el-form-item>
                </div>
            </div>
            <el-form-item>
                <el-button type="primary" @click="addSchedule" :loading="buttonLoading">添加</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>
</template>

<script>
// import * as ElectricMeterApi from "@/api/zufang/electricMeter";

import { getSchedule,addSchedule } from '@/api/equipment/electricity'

export default {
    data() {
        return {
            dialogTitle: '',
            dialogVisible: false,
            executeTime: [],
            closeTime: [],
            weekOpenDay: 0,
            weekCloseDay: 0,
            lastOpenWeekDay: 0,
            lastCloseWeekDay: 0,
            weekDayExecuteTime: [[], [], [], [], [], [], []],
            weekDayCloseTime: [[], [], [], [], [], [], []],
            scheduleForm: {
                sn: '',
                openWeekTimes: [],
                closeWeekTimes: []
            },
            buttonLoading: false

        }
    },
    methods: {
        // 重置
        reset() {
            // 开启
            this.weekOpenDay = 0
            this.lastOpenWeekDay = 0
            this.weekDayExecuteTime = [
                [], [], [], [], [], [], []
            ]
            this.executeTime = []
            // 结束
            this.weekCloseDay = 0
            this.lastCloseWeekDay = 0
            this.weekDayCloseTime = [
                [], [], [], [], [], [], []
            ]
            this.closeTime = []
        },
        async open(row) {
            console.log(row)
            this.reset()
            this.dialogVisible = true
            this.dialogTitle = '定时操作'
            let data = await getSchedule(row.sn)
            if (data.openWeekTimes !== null) {
                for (let item of data.openWeekTimes) {
                    let i = parseInt(item.weekVal) - 1
                    if (i === 0) {
                        console.log('开启', item.times)
                        this.executeTime = item.times
                    }
                    this.weekDayExecuteTime[i] = item.times
                }
            }
            if (data.closeWeekTimes !== null) {
                for (let item of data.closeWeekTimes) {
                    let i = parseInt(item.weekVal) - 1
                    if (i === 0) {
                        console.log('结束', item.times)
                        this.closeTime = item.times
                    }
                    this.weekDayCloseTime[i] = item.times
                }
            }
            this.scheduleForm.sn = data.sn
        },
        // 添加开始时间段
        addExecuteTime() {
            let time = '00:00'
            let length = this.executeTime.length
            if (length >= 10) {
                this.$message.info('一天最多添加10个时间点')
                return
            }
            this.executeTime.push(time)
        },
        // 删除开始时间段
        delExecuteTime(index) {
            this.executeTime.splice(index, 1)
        },
        // 添加结束时间段
        addCloseTime() {
            let time = '00:00'
            let length = this.closeTime.length
            if (length >= 10) {
                this.$message.info('一天最多添加10个时间点')
                return
            }
            this.closeTime.push(time)
        },
        // 删除结束时间段
        delCloseTime(index) {
            this.closeTime.splice(index, 1)
        },
        // 切换开始日
        weekOpenDayChange(val) {
            console.log(this.executeTime)
            this.weekDayExecuteTime[this.lastOpenWeekDay] = this.executeTime
            this.executeTime = this.weekDayExecuteTime[val]
            this.lastOpenWeekDay = parseInt(val)
        },
        // 切换结束日
        weekCloseDayChange(val) {
            this.weekDayCloseTime[this.lastCloseWeekDay] = this.closeTime
            this.closeTime = this.weekDayCloseTime[val]
            this.lastCloseWeekDay = parseInt(val)
        },
        async addSchedule() {
            this.buttonLoading = true
            if (this.weekOpenDay === 0) {
                // console.log('开始时候',executeTime.value)
                this.weekDayExecuteTime[0] = this.executeTime
            }
            if (this.weekCloseDay === 0) {
                // console.log('结束时候',closeTime.value)
                this.weekDayCloseTime[0] = this.closeTime
            }
            // 开启
            let openList = []
            let openLen = this.weekDayExecuteTime.length
            for (let i = 0; i < openLen; ++i) {
                if (this.weekDayExecuteTime[i].length > 0) {
                    // console.log('开启为0',weekDayExecuteTime.value[0])
                    let obj = {
                        'weekVal': (i + 1) + '',
                        'times': this.weekDayExecuteTime[i]
                    }
                    openList.push(obj)
                }
            }
            this.scheduleForm.openWeekTimes = openList
            // 结束
            let closeList = []
            let closeLen = this.weekDayCloseTime.length
            for (let i = 0; i < closeLen; ++i) {
                if (this.weekDayCloseTime[i].length > 0) {
                    // console.log('结束为0',weekDayCloseTime.value[0])
                    let obj = {
                        'weekVal': (i + 1) + '',
                        'times': this.weekDayCloseTime[i]
                    }
                    closeList.push(obj)
                }
            }
            this.scheduleForm.closeWeekTimes = closeList
            try {
                await addSchedule(this.scheduleForm)
                this.$message.success('添加成功')
                this.dialogVisible = false
                // 发送操作成功的事件
                this.$emit('success')
            } catch (e) {

            } finally {
                this.buttonLoading = false
            }
        }
    }
}


</script>

<style scoped>

</style>
